<!-- 平台日志 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="form" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="姓名">
                <el-input v-model="form.name" placeholder="输入姓名"></el-input>
            </el-form-item>

            <el-form-item label="日期">
                <el-date-picker v-model="pickerData" @change="pickerChange" type="daterange" value-format="yyyy-MM-dd"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
        </CustomForm>
        <el-table :data="list" style="width: 100%" height="705" v-loading="tableloading" border ref="multipleTable">
            <el-table-column prop="action_name" width="200" label="用户姓名" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="action_project" width="240" label="用户操作" align="center"
                :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="desc" label="操作明细" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="action_time" width="180" label="操作时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="ip" width="180" label="所属IP" align="center" :show-overflow-tooltip="true">
            </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="form.page" :page-sizes="$pageSizeList" :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { actionLog } from '@/api/set.js'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            form: {
                name: "",
                time: "", //2024-05-06 / 2024-05-07
                page: 1,
                pageSize: 10,
            },
            list: [],
            total: 0,
            pickerData: [],
            tableloading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async actionLog() {
            this.tableloading = true;
            let res = await actionLog(this.form);
            this.tableloading = false;
            if (res.code == 200) {
                this.list = res.data.data ? res.data.data : [];
                this.total = res.data.total ? res.data.total : 0;
            }
        },
        onSubmit() {
            this.actionLog();
        },
        resetTable() {
            this.form = {
                name: "",
                time: "", //2024-05-06 / 2024-05-07
                page: 1,
                pageSize: 15,
            };
            this.pickerData = [];
            this.actionLog();
        },
        pickerChange(val) {
            if (val && val.length > 0) {
                this.form.time = val.join('/');
            } else {
                this.form.time = [];
            }
        },
        handleSizeChange(pageSize) {
            this.form.pageSize = pageSize;
            this.actionLog();
        },
        handleCurrentChange(page) {
            this.form.page = page;
            this.actionLog();
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.actionLog();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-pagination {
    margin-top: 20px;
}

::v-deep .el-table .el-table__cell {
    padding: 10px 0;
}
</style>